<style type="text/css">
    .layui-table-body{overflow-x:auto;}
    .layui-table-cell{font-size:12px;}
    /** 箭头未展开 */
    #table1 + .treeTable .treeTable-icon .layui-icon-triangle-d:before {
        content: "\e602";
    }

    /** 箭头展开 */
    #table1 + .treeTable .treeTable-icon.open .layui-icon-triangle-d:before {
        content: "\e61a";
    }

    /** 文件图标 */
    #table1 + .treeTable .treeTable-icon .layui-icon-file:before {
        content: "\e60d";
    }

    /** 文件夹未展开 */
    #table1 + .treeTable .treeTable-icon .layui-icon-layer:before {
        content: "\e637";
    }

    /** 文件夹展开 */
    #table1 + .treeTable .treeTable-icon.open .layui-icon-layer:before {
        content: "\e634";
    }
</style>
<div>
    <input id="edt-search" type="text" placeholder="输入关键字" style="width: 120px;"/>&nbsp;&nbsp;
    <button class="layui-btn" id="btn-search">&nbsp;&nbsp;搜索&nbsp;&nbsp;</button>
<table id="dataTable"></table>
</div>
<script type="text/html" title="操作按钮模板" id="buttonTpl">
    <a href="{:url('edit')}?type=type&id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-normal hisi-iframe-pop"  hisi-data="{width: '550px', height: '420px', title: '修改'}">修改</a><a href="{:url('del')}?type=type&id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-danger j-tr-del">删除</a>
</script>
{include file="system@block/layui" /}
<script id="toolbar" type="text/html">
    <a href="{:url('add')}?type=type" class="layui-btn layui-btn-primary layui-icon layui-icon-add-circle-fine j-iframe-pop" title="添加" width="460" height="270">&nbsp;添加</a>
        <a href="{:url('organ_export')}" class="layui-btn layui-btn-primary layui-icon layui-icon-play" width="460" height="270">&nbsp;导出</a>
        <a href="#" class="layui-btn" id="test1"><i class="layui-icon">&#xe67c;</i>导入excel</a>
        
</script>
<script type="text/javascript">
    
    layui.use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        var renderTable = function () {
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: "0",
                treeIdName: 'id',
                treePidName: 'pid',
                treeDefaultClose: false,
                treeLinkage: false,
                toolbar: '#toolbar',
                elem: '#dataTable',
                url: '{:url()}',
                page: false,
                cols: [[
                    {type:'numbers', title: '序号'},
                    {field: 'name', title: '分类名'},
                    {field: 'describes', title: '分类描述'},
                    {field: 'orders', title: '排序'},
                    {field: 'status', title: '状态'},
                    ,{title: '操作', width: 110, templet: '#buttonTpl'}
                ]],
                done: function () {
                    file_upload();
                    layer.closeAll('loading');
                },
                defaultToolbar:["filter"]
            });
        };

        renderTable();

        var $ = layui.jquery;
        $('#btn-search').click(function () {
            // alert(123);return false;
            var keyword = $('#edt-search').val();
            var searchCount = 0;
            $('#dataTable').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword != '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        treetable.expandAll('#dataTable');
                        $('html,body').stop(true);
                        $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword == '') {
                layer.msg("请输入搜索内容", {icon: 5});
            } else if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5});
            }
        });
        
    });
    
    function file_upload(){
        layui.use('upload', function(){
            var upload = layui.upload; //得到 upload 对象
            //创建一个上传组件
            upload.render({
            elem: '#test1'
            ,url: '{:url("organ_import")}'
            ,method:'post'
            ,done: function(res){ //上传后的回调
                // console.log(res);
                if(res.status=='success'){
                    layer.msg('导入成功');
                    window.location.reload();
                }
                else{
                    layer.msg(res.msg);
                }
            } 
            ,accept: 'file' //允许上传的文件类型
            //,size: 50 //最大允许上传的文件大小
            //,……
            })
        });
    }
    
</script>